<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Slider Gallery</title>
    <style type="text/css" media="screen">
    <!--
        body {
            padding: 0; 
            font: 1em "Trebuchet MS", verdana, arial, sans-serif; 
            font-size: 100%;
            background-color: #212121;
            margin: 0;
        }

        h1 { 
            margin-bottom: 2px; 
        }

        #container {
            background-color: #fff;
            width: 580px;
            margin: 15px auto;
            padding: 50px;
        }
        
        /* slider specific CSS */
        .sliderGallery {
            background: url(images/productbrowser_background_20070622.jpg) no-repeat;
            overflow: hidden;
            position: relative;
            padding: 10px;
            height: 160px;
            width: 560px;
        }
        
        .sliderGallery UL {
            position: absolute;
            list-style: none;
            overflow: none;
            white-space: nowrap;
            padding: 0;
            margin: 0;
        }
        
        .sliderGallery UL LI {
            display: inline;
        }
        
        .slider {
            width: 542px;
            height: 17px;
            margin-top: 140px;
            margin-left: 5px;
            padding: 1px;
            position: relative;
            background: url(productbrowser_scrollbar_20070622.png) no-repeat;
        }
        
        .handle {
            position: absolute;
            cursor: move;
            height: 17px;
            width: 181px;
            top: 0;
            background: url(productbrowser_scroller_20080115.jpeg) no-repeat;
            z-index: 100;
        }
        
        .slider span {
            color: #bbb;
            font-size: 80%;
            cursor: pointer;
            position: absolute;
            z-index: 110;
            top: 3px;
        }
        
        .slider .slider-lbl1 {
            left: 50px;
        }
        
        .slider .slider-lbl2 {
            left: 107px;
        }
        
        .slider .slider-lbl3 {
            left: 156px;
        }

        .slider .slider-lbl4 {
            left: 280px;
        }

        .slider .slider-lbl5 {
            left: 455px;
        }
    -->
    </style>

    <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="jquery.dimensions.js" type="text/javascript" charset="utf-8"></script>

    <script src="ui.mouse.js" type="text/javascript" charset="utf-8"></script>
    <script src="ui.slider.js" type="text/javascript" charset="utf-8"></script>
    
    <script type="text/javascript" charset="utf-8">
        window.onload = function () {
            var container = $('div.sliderGallery');
            var ul = $('ul', container);
            
            var itemsWidth = ul.innerWidth() - container.outerWidth();
            
            $('.slider', container).slider({
                minValue: 0,
                maxValue: itemsWidth,
                handle: '.handle',
                stop: function (event, ui) {
                    ul.animate({'left' : ui.value * -1}, 500);
                },
                slide: function (event, ui) {
                    ul.css('left', ui.value * -1);
                }
            });
        };
    </script>
</head>
<body>
    <div id="container">
        <h1>Slider Gallery</h1>
        <p>This shows a demonstration of a slider widget from the jQuery UI library used to create the same effect used on <a href="http://www.apple.com/mac/">Apple's web site</a>.</p>

        <p><a href="/slider-gallery">Read the article, and see the screencast this demonstration relates to</a></p>

        <div class="sliderGallery">
            <ul>
                <li><img class="dresses" src="g_2_5.jpg" /></li>
                <li><img src="g_4_6.jpg" /></li>
                <li><img src="g_1_3.jpg" /></li>
                <li><img src="g_1_1.jpg" /></li>
                <li><img src="g_2_4.jpg" /></li>
				<li><img src="g_1_2.jpg" /></li>
				

                <li><img src="pb_cinema_display20071026.jpg" /></li>
                <li><img src="pb_mac_pro_20070622.jpg" /></li>

                <li><img class="pb-macmini" src="images/pb_mac_mini.jpg" /></li>
                <li><img src="pb_macbook20071026.jpg" /></li>
                <li><img class="pb-macbookair" src="pb_macbookair_20080115.jpg" /></li>
                <li><img class="pb-macbookpro" src="pb_macbook_pro20071026.jpg" /></li>
                <li><img class="pb-imac" src="/pb_imac20071026.jpg" /></li>
                <li><img src="pb_macosx_20080115.jpg" /></li>

                <li><img src="pb_ilife_20080115.jpg" /></li>
                <li><img src="pb_dot_mac_20080115.jpg" /></li>
                <li><img src="pb_iwork_20080115.jpg" /></li>

                <li><img src="pb_quicktime.jpg" /></li>
                <li><img src="pb_aperture20080212.jpg" /></li>
                <li><img src="pb_final_cut_studio2_20080115.jpg" /></li>
                <li><img src="pb_final_cut_express_20080115.jpg" /></li>
                <li><img src="pb_logic_studio_20080115.jpg" /></li>

                <li><img src="pb_logic_express_20080115.jpg" /></li>
                <li><img src="pb_shake_20080115.jpg" /></li>                    
                <li><img src="pb_apple_remote_desktop_20080115.jpg" /></li>
                <li><img src="pb_xserve.jpg" /></li>

                <li><img src="pb_xserve_raid.jpg" /></li>
                <li><img class="pb-xsan" src="pb_xsan_20080115.jpg" /></li>
                <li><img class="pb-macosxserver" src="pb_macosx_server20071016.jpg" /></li>                    
            </ul>
            <div class="slider">

                <div class="handle"></div>
                <span class="slider-lbl1">Dresses</span>
                <span class="slider-lbl3">Macs</span>
                <span class="slider-lbl4">Applications</span>
                <span class="slider-lbl5">Servers</span>
            </div>
        </div>

    </div>
</body>
</html>





